<template>
<view class="recommend-dialog flexc align-center">
	<view class="title">
		已生成二维码
	</view>
	<view class="desc">
		快让朋友们扫一扫，体验一下吧
	</view>
	<w-qrcode v-if="showQrCode" class="qrcode"
		:options="qroptions"
		@generate="generateQrCode"
	>
	</w-qrcode>
	<image class="qrcode-img" :src="qrCodeImg"></image>
	<view class="button wx" @click="emits('onConfirm')">
		<image class="wx-icon" src="@/static/weixin.png"></image>
		微信推荐
	</view>
	<view class="button cancel" @click="emits('onCancel')">
		取消
	</view>
</view>
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
	show: Boolean,
})
const qrCodeImg = ref();
const showQrCode = ref(false);
let timeOut = null;
watch(() => props.show, (newShow) => {
	if (!newShow) {
		timeOut = setTimeout(() => {
			showQrCode.value = false;
		}, 1000);
	} else {
		clearTimeout(timeOut);
		showQrCode.value = true;
	}
})
const qroptions = ref({
	code: 'https://qm.qq.com/cgi-bin/qm/qr?k=LKqML292dD2WvwQfAJXBUmvgbiB_TZWF&noverify=0',// 生成二维码的值
	size: 390,
})
function generateQrCode(e) {
	console.log('generateQrCode', e);
	qrCodeImg.value = e.img.tempFilePath;
}
const emits = defineEmits(['onCancel', 'onConfirm'])
</script>

<style lang="scss">
.recommend-dialog {
	background-color: white;
	border-top-right-radius: 48rpx;
	border-top-left-radius: 48rpx;
	padding-top: 60rpx;
	.title {
		color: $text-color1;
		font-size: 40rpx;
	}
	.desc {
		font-size: 24rpx;
		color: $text-color5;
		margin-top: 15rpx;
	}
	.qrcode {
		margin: 56rpx;
		width: 390rpx;
		height: 390rpx;
		position: absolute;
		left: 10000rpx;
	}
	.qrcode-img {
		margin: 56rpx;
		width: 390rpx;
		height: 390rpx;
	}
	.button {
		height: 96rpx;
		min-height: 96rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		align-self: stretch;
		margin: 0 64rpx;
		border-radius: 48rpx;
		&.wx {
			background-color: #00D668;
			color: white;
			.wx-icon {
				width: 45rpx;
				height: 40rpx;
				margin-right: 7rpx;
			}
		}
		&.cancel {
			background-color: #F3F3F3;
			color: $text-color2;
			margin-top: 32rpx;
		}
	}
}
</style>
